<template>
  <a-modal
    title="查看盘库差异"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-table
          :columns="itemColumns"
          :dataSource="itemData"
          bordered
          size="small"
          :rowKey="(record) => record.id"
          :pagination="pagination"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        >
          <span slot="inventoryQtyScopedSlots" slot-scope="text, record">
            <span v-if="record.isDiff === 0"> {{ text }} </span>
            <span v-if="record.isDiff === 1">
              <a-tag color="red">
                {{ text }}
              </a-tag>
            </span>
          </span>
        </a-table>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { inventoryDiff, inventoryMerger } from '@/api/modular/main/stock/inventory/inventoryManage'
  export default {
    data () {
      return {
        visible: false,
        confirmLoading: false,
        itemData: [],
        pagination: {
          pageSize: 10
        },
        itemColumns: [
          {
            title: '所属仓库',
            dataIndex: 'storehouseName',
            align: 'center',
            width: 150,
            scopedSlots: { customRender: 'storehouseName' }
          },
          {
            title: '所属库区',
            dataIndex: 'storehouseAreaName',
            align: 'center',
            width: 150,
            scopedSlots: { customRender: 'storehouseAreaName' }
          },
          {
            title: '所属库位',
            dataIndex: 'storehouseLocationCode',
            align: 'center',
            width: 150,
            scopedSlots: { customRender: 'storehouseLocationCode' }
          },
          {
            title: '条码号',
            dataIndex: 'barcode',
            align: 'center',
            width: 200,
            scopedSlots: { customRender: 'barcode' }
          },
          {
            title: '库存数量',
            dataIndex: 'currentQty',
            align: 'center',
            width: 120,
            scopedSlots: { customRender: 'currentQty' }
          },
          {
            title: '盘库数量',
            dataIndex: 'inventoryQty',
            align: 'center',
            width: 120,
            scopedSlots: { customRender: 'inventoryQtyScopedSlots' }
          },
          {
            title: '盘库人',
            dataIndex: 'inventoryUser',
            align: 'center',
            width: 150,
            scopedSlots: { customRender: 'inventoryUser' }
          },
          {
            title: '物料编码',
            dataIndex: 'materialCode',
            align: 'center',
            width: 150,
            scopedSlots: { customRender: 'materialCode' }
          },
          {
            title: '物料名称',
            dataIndex: 'materialName',
            align: 'center',
            width: 200,
            scopedSlots: { customRender: 'materialName' }
          },
          {
            title: '物料型号',
            dataIndex: 'materialModel',
            align: 'center',
            width: 300,
            scopedSlots: { customRender: 'materialModel' }
          },
          {
            title: '单位',
            dataIndex: 'unit',
            align: 'center',
            width: 80,
            scopedSlots: { customRender: 'unit' }
          }
        ],
        selectedRowKeys: [],
        selectedRows: [],
        form: this.$form.createForm(this)
      }
    },
    methods: {
      // 初始化方法
      add (code) {
        this.visible = true
        inventoryDiff(code).then((res) => {
					if (res.success) {
            this.itemData = res.data
          } else {
            this.$message.error('差异数据加载失败:' + res.message)
          }
        })
      },
      /**
       * 提交表单
       */
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            for (const key in values) {
              if (typeof (values[key]) === 'object') {
                values[key] = JSON.stringify(values[key])
              }
            }
            if (this.selectedRowKeys.length > 0) {
              values['idList'] = this.selectedRowKeys
            } else {
              this.$message.error('请先选择要合并的差异数据')
              this.confirmLoading = false
              return
            }
            inventoryMerger(values).then((res) => {
              if (res.success) {
                this.$message.success('合并差异成功')
                this.confirmLoading = false
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error('合并差异失败:' + res.message)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      }
    }
  }
</script>
